<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5_NewTags</title>
	<base target="_self">
	<style class='baseStyle'>
		*{margin:0;padding: 0;}
		a{color:inherit;text-decoration:none;outline:none;}
		a:hover{color:orange;text-decoration: underline;}
		body{
			font-family: '仿宋',Arial,'Microsoft yahei', Verdana,  Helvetica, sans-serif;
			font-size: 18px;
			padding-bottom: 200px;
		}
		.clearfix:after{
			visibility:hidden;
			content: '.';
			display: block;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}

		header{
			padding: 20px 0;
			text-align: center;

		}
		#construction{
			border:1px solid #ccc;
			background: rgba(211, 0, 252, 0.86);
			color:#eee;
			line-height: 1.6em;
		}
		#construction h4{
			margin-top:10px;
			color: #abcedf;
		}
		#construction p{
			padding-left: 1em;
			white-space: pre-wrap;
		}
		#aside-nav{
			position: fixed;
			right: 5%;
			top: 10%;
			display: none;
			flex-flow:column;
			color:rgba(255,255,255,1);
		}
		
		#top{
			display: none;
			position: fixed;
			right: 5%;
			bottom: 5%;
			text-align: center;
			width:35px;
			height: 35px;
			border-radius: 100%;
			line-height: 35px;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			cursor: pointer;
			color: #000;
			font-weight: bold;
			z-index: 9999;
		}
		section:not(.knowledege){
			position: relative;
			margin-top:100px;
		}
		section:not(.knowledege) p{
			position: absolute;
			top:0;
			left: 0;
			white-space: pre-line;
		}
	</style>
	<style class='classroom'>
		.example{
			position: relative;
			width: 100%;
		}
		.example>h2{
			margin: 50px auto;
			text-align: center;
		}
		.example>nav{
			position: absolute;
			margin: 50px auto;
			left: 0;
			top:0;
			width: 20%;
			display: flex;
			flex-flow:column wrap;
		}
		.example>nav>a{
			display: block;
			text-align: left;
			margin: 5px;
		}
		.example>iframe{
			position: absolute;
			top:0;
			right: 0;
			display: block;
			margin: 50px auto;
			width: 80%;
			height: 800px;
			background-color: rgba(0,0,0,.1);
		}
	</style>
</head>
<body>
	<header class="true">
		<h1 id='h-title'>H5_case</h1>
		<a href="homeWork.html" target="_self">作业</a>
		<a href="../index.html" target="_self">返回目录</a>
	</header>
	<section class='knowledege'>
		<aside id='aside-nav'>
			<nav>
			</nav>
		</aside>
		<div id=top>Top</div>
		<article id='construction'>
		</article>
	</section>
	<section class='example'>
		<h2>案例展示:</h2>
		<nav>
			<a href="case/08_课件/1-选项卡.html" target="case"></a>
			<a href="case/08_课件/2-背景颜色.html" target="case"></a>
			<a href="case/08_课件/3-背景颜色.html" target="case"></a>
			<a href="case/09_课件/1-背景墙.html" target="case"></a>
			<a href="case/09_课件/2-重复背景动画.html" target="case"></a>
			<a href="case/09_课件/3-背景图片的位置.html" target="case"></a>
			<a href="case/09_课件/4-牛排.html" target="case"></a>
			<a href="case/09_课件/5-八卦阵.html" target="case"></a>
			<a href="case/09_课件/6-延迟动画.html" target="case"></a>
			<a href="case/10_课件/1-无缝滚动/无缝滚动.html" target="case"></a>
			<a href="case/10_课件/2-雪花漂落/2-雪花飘落.html" target="case"></a>
			<a href="case/10_课件/3-手风琴/3-手风琴.html" target="case"></a>
			<a href="case/10_课件/4-云彩动画/4-云彩动画.html" target="case"></a>
			<a href="case/13_课件/1-3D模型1.html" target="case"></a>
			<a href="case/13_课件/1-3D模型2.html" target="case"></a>
			<a href="case/13_课件/3-心形.html" target="case"></a>
			<a href="case/13_课件/2-随机动画.html" target="case"></a>
			<a href="case/14_课件/14-时钟2.html" target="case"></a>
			<a href="case/14_课件/14-3D轮播图.html" target="case"></a>
		</nav>
		<iframe name='case' src="case/14_课件/14-时钟2.html" frameborder="0"></iframe>
	</section>
	<footer class='true'>
		
	</footer>
	<script class='base'>
		(function(){
			var asideNav = document.getElementById('aside-nav'),//导航
				oCons = document.getElementById('construction'),//内容
				oh4 = oCons.querySelectorAll('h4');
				frag = document.createDocumentFragment(),//Dom碎片
				createObj = null,
				min = oCons.offsetTop,
				max = min + oCons.scrollHeight,
				aTop = document.getElementById('top');
				
			for (var i = 0; i < oh4.length; i++) {
				createObj = document.createElement('a');
				createObj.innerText = oh4[i].innerText;
				oh4[i].id='title'+i;
				createObj.href = '#' + oh4[i].id;
				frag.appendChild(createObj);
			}
			asideNav.appendChild(frag);
			//addEventListener
			document.addEventListener('scroll',function(){
				var top = document.body.scrollTop;
				var bHeight = document.body.scrollHeight;
				if(top>min+200 && top<max){
					asideNav.style.display = 'flex';
				}else{
					asideNav.style.display = 'none';
				}
				if(top>bHeight/5){
					aTop.style.display = 'block';
				}else{
					aTop.style.display = 'none';
				}
			},false);
			aTop.onclick = function(e){
				e = e || window.event;
				e.preventDefault();
				m();
				function m(){
					var top = document.body.scrollTop;
					top -= 100;
					document.body.scrollTop = top;
					if(top>0){
						requestAnimationFrame(m);
					}
				}
			};
		})();
	</script>
	<script class='example'>
		(function(){
			var hTitle = document.getElementById('h-title'),
				otitle = document.querySelector('head title');
			otitle.innerText = hTitle.innerText;
			
			var oCase = document.querySelectorAll('.example>nav>a'),
				length = oCase.length;
			for (var i = 0; i < length; i++) {
				oCase[i].innerText = decodeURI(oCase[i].href.split('case/')[2]);
			}
		})();
	</script>
</body>
</html>